﻿@model IEnumerable<CustomerManagement.DataAccess.Area>

@{
    ViewBag.Title = "Area Management";
}

<h4 class="lighter">
    <i class="icon-star orange"></i>
    Area Management
</h4>

<p>
    @Html.ActionLink("Create new", "CreatePartial", null, new { id = "btnCreate", @class = "btn btn-mini no-radius" })
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.District)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.City)
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.District)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.City)
            </td>
            <td>
                <div class="btn-group">
                    <a class="btn btn-mini btn-info" title="Edit" href="/Area/EditPartial?id=@Html.DisplayFor(modelItem => item.Id)" id="btnEdit_@Html.DisplayFor(modelItem => item.Id)">
                        <i class="icon-edit bigger-125"></i>
                    </a>
                    <a class="btn btn-mini btn-yellow" title="Details">
                        <i class="icon-flag bigger-125"></i>
                    </a>
                    @using CustomerManagement.Infrastructure
                    @Ajax.RawActionLink("<i class='icon-trash bigger-125'></i>", "Delete", "Area", new { id = item.Id }, new AjaxOptions { HttpMethod = "Post", Confirm = "Are you sure you want to delete this area?" }, new { @class = "btn btn-mini btn-danger" })
                </div>
            </td>
        </tr>
    }

</table>
<div id="dialogDiv" class='modal hide fade'>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
    //function submitForm(element) {
    //    var result = confirm("Are you sure you wanna delete this Customer?");
    //    if (result) {
    //        var e = $(element);//element not element.id
    //        var form = e.parent('form').get(0);//.get(0) added
    //        form.submit();
    //    }
    //    else
    //        return false;
    //};
    $(function () {
        $('.btn-close').click(function (e) {
            e.preventDefault();
            $(this).parent().parent().parent().fadeOut();
        });

        $("[id*='btnEdit']").on("click", function (event) {
            event.preventDefault();
            var clientId = $(this).attr("href");
            $.ajax({
                url: clientId,
                type: "GET",
            })
            .done(function (result) {
                //$("#dialogDiv").html(result).dialog();
                $("#dialogDiv").html(result);
                $("#dialogDiv").modal({ backdrop: 'static' })
                $('#dialogDiv').modal('show');
            });
        });

        $("#btnCreate").on("click", function (event) {
            event.preventDefault();
            var clientId = $(this).attr("href");
            $.ajax({
                url: clientId,
                type: "GET",
            })
            .done(function (result) {
                //$("#dialogDiv").html(result).dialog();
                $("#dialogDiv").html(result);
                $("#dialogDiv").modal({ backdrop: 'static' })
                $('#dialogDiv').modal('show');
            });
        });
    });
</script>